<script setup>
import { ref } from "vue";
import { _$, $, to } from "./register";
import { User, Lock, QuestionFilled, Postcard } from "@element-plus/icons-vue";

const formRef = ref();
</script>

<template>
  <div class="container">
    <div style="background-color: white; height: 100px">
      <div
        style="
          margin: 0 auto;
          width: 50%;
          height: 100%;
          display: flex;
          align-items: center;
        "
      >
        <img src="@/assets/imgs/logo.png" alt="" style="width: 70px" />
        <span style="font-weight: bold; font-size: 24px; margin-left: 5px"
          >个人健康档案与饮食推荐管理系统</span
        >
      </div>
    </div>

    <div
      style="
        margin: 0 auto;
        width: 50%;
        height: calc(100vh - 140px);
        display: flex;
        grid-gap: 20px;
        align-items: center;
      "
    >
      <div style="flex: 1">
        <img style="width: 100%" src="@/assets/imgs/login.png" alt="" />
      </div>

      <div style="flex: 1">
        <div
          style="
            width: 350px;
            padding: 40px 40px 20px 40px;
            background-color: white;
            border-radius: 5px;
          "
        >
          <h2
            style="
              text-align: center;
              font-size: 20px;
              letter-spacing: 0.4em;
              padding-bottom: 30px;
              color: #333;
            "
          >
            用户注册
          </h2>
          <!--注册表单-->
          <el-form
            ref="formRef"
            size="large"
            autocomplete="off"
            :model="_$.register.requestParam"
            :rules="_$.register.rules"
          >
            <el-form-item prop="username">
              <el-input
                :prefix-icon="User"
                placeholder="请输入账号"
                v-model="_$.register.requestParam.username"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                name="password"
                :prefix-icon="Lock"
                type="password"
                placeholder="请输入密码"
                v-model="_$.register.requestParam.password"
              ></el-input>
            </el-form-item>
            <el-form-item prop="username">
              <el-input
                :prefix-icon="QuestionFilled"
                placeholder="请输入密保"
                v-model="_$.register.requestParam.question"
              ></el-input>
            </el-form-item>
            <el-form-item prop="username">
              <el-input
                :prefix-icon="Postcard"
                placeholder="请输入答案"
                v-model="_$.register.requestParam.answer"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                style="width: 100%; color: black"
                type="warning"
                @click="$.onSubmit(formRef)"
                >注册</el-button
              >
            </el-form-item>
            <el-form-item>
              <div
                style="width: 100%; display: flex; justify-content: flex-end"
              >
                <p>
                  已有账号？请
                  <el-link
                    type="primary"
                    :underline="false"
                    @click="to.toLogin"
                  >
                    登录
                  </el-link>
                </p>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>

    <div
      style="
        height: 70px;
        font-size: 14px;
        line-height: 30px;
        color: #666;
        text-align: center;
      "
    >
      ©2018-2024 ZYN——个人健康档案与饮食推荐管理系统 201811040011号
    </div>
  </div>
</template>

<style scoped>
.container {
  height: 100vh;
  overflow: hidden;
  background-color: #f6f6f6;
}

.flex {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
</style>
